<template>
    <div class="container">
        <div class="container MuiPaper-elevation2-346 MuiPaper-rounded-343 ">
            <div class="handle-box">
                <div class="EnhancedTableToolbar-title-373">
                    <div>联盟
                        <el-button class="mr10" type="primary"
                            @click="dialogConsortiumMgrVisible = true, getAllConsortiumsRequest(), getOrganizationRequest()">
                            <el-icon>
                                <Plus />
                            </el-icon>添加联盟
                        </el-button>
                    </div>
                </div>
            </div>
            <el-table :data="tableData" border class="table" header-cell-class-name="table-header">
                <el-table-column prop="name" label="联盟名称"></el-table-column>
                <el-table-column prop="desc" label="联盟描述"></el-table-column>
                <el-table-column prop="msp" label="联盟中的MSP" width="200"></el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template #default="scope">
                        <el-button type="primary" key="primary" @click="deleteAConsortiumRequest(scope.$index)">删除
                        </el-button>
                        <el-button type="primary" key="primary" @click="getAConsortiumRequest(scope.$index)">详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogConsortiumMgrVisible" title="添加联盟" width="30%">
            <el-form :model="newConsortiumMgrData">
                <el-form-item label="联盟名称*" :label-width="consortiumMgrFormLabelWidth">
                    <el-input v-model="newConsortiumMgrData.consortiumName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联盟描述" :label-width="consortiumMgrFormLabelWidth">
                    <el-input type="text" v-model="newConsortiumMgrData.consortiumDp" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联盟类型" :label-width="consortiumMgrFormLabelWidth">
                    <el-select v-model="newConsortiumMgrData.consortiumType">
                        <el-option label="application" value="application" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联盟中的MSP*" :label-width="consortiumMgrFormLabelWidth">
                    <el-table :data="tableMSPData" border class="table" header-cell-class-name="table-header"
                        @selection-change="handleSelectionChange" :row-style="{ height:'35px' }"
                        :cell-style="{ padding:'0px'}" :header-row-style="{ height:'35px'}"
                        :header-cell-style="{ padding: '0px'}">
                        <el-table-column type="selection" />
                        <el-table-column prop="Organization" label="Organization" align="center"></el-table-column>
                        <el-table-column prop="MSPName" label="MSP" align="center"></el-table-column>
                    </el-table>

                </el-form-item>

            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="postAddConsortiumRequest()">提交</el-button>
                    <el-button @click="dialogConsortiumMgrVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="infoDialogVisible" width="40%">
            <el-descriptions title="查看联盟" direction="horizontal" column="1" border>
                <el-descriptions-item label="联盟名称">{{ consortiumInfo.Name }}</el-descriptions-item>
                <el-descriptions-item label="联盟描述">{{ consortiumInfo.Desc }}</el-descriptions-item>
                <el-descriptions-item label="联盟类型">{{ consortiumInfo.Type }}</el-descriptions-item>
                <el-descriptions-item label="联盟中的MSP">{{ consortiumInfo.MspNames }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import axios from 'axios'
import { ElMessage } from "element-plus";

const tableData = ref([]) as any;
const tableMSPData = ref([]) as any;

const newConsortiumMgrData = reactive({
    consortiumName: '',                                 // 联盟名称
    consortiumDp: '',                                   // 联盟描述
    consortiumMSP: [] as any,                                  // 联盟的MSP
    consortiumType: ''                                  // 联盟类型
});
// const consortiumTypeSelecet = ref([]);

const dialogConsortiumMgrVisible = ref(false);          // 添加联盟

const infoDialogVisible = ref(false);                   // 联盟详细信息

const consortiumMgrFormLabelWidth = '140px'             // 对话框宽度

const multipleSelection = ref([]) as any;                  // 已选择的表格行对象
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val;
}

onMounted(() => {
    getAllConsortiumsRequest();
})

// 查询联盟信息
const getAllConsortiumsRequest = () => {
    tableData.value = [];
    axios.get('/prefix/api/entity/consortiums', {
    }).then(function (response) {
        let length = response.data.consortiums == null ? 0 : response.data.consortiums.length;
        for (let i = 0; i < length; i++) {
            tableData.value.push({
                name: response.data.consortiums[i].Name,
                desc: response.data.consortiums[i].Desc,
                msp: ""
            })
            let mspLength = response.data.consortiums[i].MspNames == null ? 0 : response.data.consortiums[i].MspNames.length;
            for (let j = 0; j < mspLength; j++) {
                tableData.value[i].msp += response.data.consortiums[i].MspNames[j];
                if (j < mspLength - 1) {
                    tableData.value[i].msp += ", ";
                }
            }
        }
    }).catch(function (error) {
        ElMessage.error("查询联盟信息失败!");
        console.log(error);
    })
}

// 查询组织信息
const getOrganizationRequest = () => {
    tableMSPData.value = [];
    axios.get('/prefix/api/entity/organizations', {
    }).then(function (response) {
        let length = response.data.organizations == null ? 0 : response.data.organizations.length;
        for (let i = 0; i < length; i++) {
            tableMSPData.value.push({
                MSPName: response.data.organizations[i].MSPs[1].Name,
                Organization: response.data.organizations[i].Organization
            });
        }
    }).catch(function (error) {
        ElMessage.error("查询组织信息失败!");
        console.log(error);
    })
}

// 添加联盟
const postAddConsortiumRequest = () => {
    newConsortiumMgrData.consortiumMSP = [];
    let length = multipleSelection.value == null ? 0 : multipleSelection.value.length;
    if (length == 0) {
        ElMessage.error("请选择MSP!");
    } else {
        for (let i = 0; i < length; i++) {
            newConsortiumMgrData.consortiumMSP.push(multipleSelection.value[i].MSPName);
        }
        // console.log(newConsortiumMgrData.consortiumMSP);
        axios.post('prefix/api/entity/consortiums/' + newConsortiumMgrData.consortiumName, {
            Name: newConsortiumMgrData.consortiumName,
            Desc: newConsortiumMgrData.consortiumDp,
            Type: newConsortiumMgrData.consortiumType,
            MspNames: newConsortiumMgrData.consortiumMSP
        }).then(function (response) {
            dialogConsortiumMgrVisible.value = false;                 // 关闭对话框
            ElMessage.success("添加成功!")
            getAllConsortiumsRequest();
        }).catch(function (error) {
            ElMessage.error("添加失败!" + error);
        })
    }

}

// 查看某联盟的详细信息
const consortiumInfo = ref({
    Name: "",
    Desc: "",
    Type: "",
    MspNames: ""
});
const getAConsortiumRequest = (index) => {
    axios.get('prefix/api/entity/consortiums/' + tableData.value[index].name, {
    }).then(function (response) {
        consortiumInfo.value.Name = response.data.Name;
        consortiumInfo.value.Desc = response.data.Desc;
        consortiumInfo.value.Type = response.data.Type;
        consortiumInfo.value.MspNames = response.data.MspNames;
        infoDialogVisible.value = true;
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
}

// 删除某个联盟
const deleteAConsortiumRequest = (index) => {
    console.log(index);
    axios.delete('prefix/api/entity/consortiums/' + tableData.value[index].name, {
    }).then(function (response) {
        getAllConsortiumsRequest();
        ElMessage.success("删除成功!");
    }).catch(function (error) {
        ElMessage.error("删除失败!" + error);
    })
}
</script>
  
<style scoped>
.table {
    width: 100%;
    font-size: 14px;
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.mr10 {
    margin-right: 10px;
}

.EnhancedTableToolbar-title-373 {
    flex: 0 0 auto;
}

.handle-box {
    margin-bottom: 20px;
}

.MspTable-root-444 {
    margin-top: 24px;
}

.MuiPaper-elevation2-346 {
    box-shadow: 0px 1px 5px 0px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 3px 1px -2px rgb(0 0 0 / 12%);
}

.MuiPaper-rounded-343 {
    border-radius: 4px;
}
</style>
  